<template>
  <div class="btnBox">
    <!-- 关闭交易按钮内容 isCloseOrder === '1' 点击的是关闭交易按钮 -->
    <div v-if="isCloseOrder === '1'"
         class="closeBox">
      <van-popup v-model="isShow"
                 closeable
                 round
                 @close="closeOrders"
                 position="bottom"
                 :style="{ height: '70%'}">

        <!-- 关闭交易弹出框 -->
        <div class="myCloseBox">
          <span class="title">关闭交易</span>
          <span class="close_des">关闭交易后无法恢复，资金、优惠券、红包则可退还给客户</span>
          <!-- 单选原因 -->
          <span class="reason">请选择原因</span>
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell title="未及时付款"
                        clickable
                        @click="radio = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell title="买家不想要了"
                        clickable
                        @click="radio = '2'">
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
              <van-cell title="买家收货人信息填写有误"
                        clickable
                        @click="radio = '3'">
                <template #right-icon>
                  <van-radio name="3" />
                </template>
              </van-cell>
              <van-cell title="恶意买家/同行捣乱"
                        clickable
                        @click="radio = '4'">
                <template #right-icon>
                  <van-radio name="4" />
                </template>
              </van-cell>
              <van-cell title="缺货"
                        clickable
                        @click="radio = '5'">
                <template #right-icon>
                  <van-radio name="5" />
                </template>
              </van-cell>
              <van-cell title="买家点错菜，点多了"
                        clickable
                        @click="radio = '6'">
                <template #right-icon>
                  <van-radio name="6" />
                </template>
              </van-cell>
              <van-cell title="其他"
                        clickable
                        @click="radio = '7'">
                <template #right-icon>
                  <van-radio name="7" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <!--  确定关闭按钮 -->
          <div class="closeBtn">
            <button class="sureClose"
                    @click="sureClose">确定关闭</button>
          </div>
        </div>
      </van-popup>
    </div>

    <!-- 拒绝申请按钮内容  isCloseOrder === '2' 点击的是拒绝交易按钮 -->
    <div v-if="isCloseOrder === '2'"
         class="rejectBox">
      <van-popup v-model="isShow"
                 closeable
                 round
                 @close="closeOrders"
                 position="bottom"
                 :style="{ height: '66%'}">

        <!-- 拒绝申请弹出框 -->
        <div class="myRejectBox">
          <span class="title">拒绝申请</span>
          <span class="reject_des">您拒绝后，顾客可要求平台介入处理。如果平台核实是您的责任，将影响您店铺的口碑。</span>
          <!-- 单选原因 -->
          <span class="reason">请选择原因</span>
          <van-radio-group v-model="radioReject">
            <van-cell-group>
              <van-cell title="货物拦截中，我们收到货物后会给您退款"
                        clickable
                        @click="radio = '1'">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell title="申请时间已超售后服务时限"
                        clickable
                        @click="radio = '2'">
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
              <van-cell title="恶意退款或同行捣乱"
                        clickable
                        @click="radio = '3'">
                <template #right-icon>
                  <van-radio name="3" />
                </template>
              </van-cell>
              <van-cell title="其他"
                        clickable
                        @click="radio = '4'">
                <template #right-icon>
                  <van-radio name="4" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <!-- 补充说明 -->
          <div>
            <div>补充说明</div>
            <textarea class="add_desc"></textarea>
          </div>
          <!--  确定拒绝按钮 -->
          <div class="rejectBtn">
            <button class="sureReject"
                    @click="closeOrders">确定拒绝</button>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 拒绝申请按钮内容  isCloseOrder === '3' 点击的是查看发票按钮 -->
    <div v-if="isCloseOrder === '3'"
         class="receiptBox">
      <van-popup v-model="isShow"
                 closeable
                 round
                 @close="closeOrders"
                 position="bottom"
                 :style="{ height: '50%'}">

        <!-- 拒绝申请弹出框 -->
        <div class="myReceiptBox">
          <span class="title">发票信息</span>
          <!-- 发票信息 -->
          <div>
            <span>发票类型：</span>
            <span>纸质发票</span>
          </div>
          <div>
            <span>发票内容：</span>
            <span>餐饮服务</span>
          </div>
          <div>
            <span>发票抬头：</span>
            <span>默林如斯工作室</span>
          </div>
          <div>
            <span>企业税号：</span>
            <span>BHYI12345678</span>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 退款处理流程  isCloseOrder === '4' 点击的是查看顾客退款流程 -->
    <div v-if="isCloseOrder === '4'"
         class="refundBox">
      <van-popup v-model="isShow"
                 closeable
                 round
                 @close="closeOrders"
                 position="bottom"
                 :style="{ height: '70%'}">

        <!-- 退款流程弹出框 -->
        <div class="myRefundBox">
          <span class="title">退款详情</span>
          <!-- 退款流程 -->
          <div>
            <van-steps direction="vertical"
                       :active="0"
                       active-color="#ff6e53"
                       inactive-color="#fca190">
              <van-step>
                <h3 style="color:#000">等待商家处理</h3>
                <div style="color:#999">请及时处理，否则系统将自动同意退款</div>
                <span style="color:#efbb4a">
                  <van-icon name="clock-o" />
                </span>
                <span style="color:#efbb4a">剩余29分钟</span>
              </van-step>
              <van-step>
                <h3 style="color:#000">发起申请</h3>
                <span style="color:#999">顾客发起了退款申请</span>
              </van-step>
            </van-steps>
          </div>
          <div class="consultDetail">
            <!-- 协商历史 -->
            <div class="consult">
              <div><span>协商历史</span></div>
              <div @click="talkHistoryHandel">
                <span>查看</span>
                <span>
                  <van-icon name="arrow" />
                </span>
              </div>
            </div>
            <!-- 退款详情 -->
            <div class="details">
              <div class="orderNum">
                <span>退款编号</span>
                <span>12121212121212</span>
              </div>
              <div class="orderMoney">
                <span>退款金额</span>
                <span>10.8P</span>
              </div>
              <div class="orderReason">
                <span>退款原因</span>
                <span>点错菜了，点多了</span>
              </div>
              <div class="addReason">
                <span>补充说明</span>
                <span>点错了不好意思</span>
              </div>
            </div>
            <!-- 买家信息 -->
            <div class="buyerInfo">
              <div class="buyerName">
                <span>买家昵称</span>
                <span>小默123</span>
              </div>
              <div class="buyerOrder">
                <span>订单编号</span>
                <span>34343433434</span>
              </div>
              <div class="buyerGoods">
                <span>商品名称</span>
                <span>香辣鸡块汉堡包</span>
              </div>
              <div class="buyerPay">
                <span>应付款</span>
                <span>10.8P</span>
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 退款处理流程  isCloseOrder === '5' 点击的是订单跟踪 -->
    <div v-if="isCloseOrder === '5'"
         class="followBox">
      <van-popup v-model="isShow"
                 closeable
                 round
                 @close="closeOrders"
                 position="bottom"
                 :style="{ height: '70%'}">

        <!-- 退款流程弹出框 -->
        <div class="myFollowBox">
          <span class="title">订单跟踪</span>
          <!-- 地图 -->
          <el-amap id="container"></el-amap>
          <!-- 订单跟踪流程 -->
          <div class="step">
            <van-steps direction="vertical"
                       :active="0"
                       active-color="#ff6e53"
                       inactive-color="#fca190">
              <van-step>
                <div class="displayF">
                  <div class="displayF_left">等待顾客付款</div>
                  <div class="displayF_right"
                       id="greyColor">12-07 18:26</div>
                </div>
                <span style="color:#ff9900">
                  <van-icon name="clock-o" />
                </span>
                <span style="color:#efbb4a">剩余9分钟</span>
              </van-step>
              <van-step>
                <div class="displayF">
                  <div class="displayF_left">顾客提交订单</div>
                  <div class="displayF_right"
                       id="greyColor">12-07 18:26</div>
                </div>
                <span class="greyColor">预计送达：12-07 19：10</span>
              </van-step>
            </van-steps>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  data () {
    return {
      isShow: this.show,//关闭订单按钮的model
      radio: '1',//关闭订单原因model
      radioReject: '1',//拒绝申请原因model
      lineArr: [[116.478935, 39.997761], [116.484648, 39.999861]], // 起点和终点的数组，第一个数组是起点的经纬度，第二个是终点的
      // isShowReject: this.show,//拒绝订单按钮的model  统一用isShow
    }
  },
  props: ['hideOrder', 'show', 'isCloseOrder'],
  watch: {
    show (newValue, oldValue) {
      console.log(newValue, oldValue);
      this.isShow = newValue
      // this.isShowReject = newValue
      // 加载地图显示控制时调用
      lazyAMapApiLoaderInstance.load().then(() => {
        this.initMap();
      });
    }
  },
  methods: {
    // 关闭订单
    closeOrders () {
      // this.show = true;
      console.log(this.isShow)
      // this.showGoods = true
      console.log('111111')
      this.$emit('hideOrder', false)
    },
    // 点击确认关闭交易按钮
    sureClose () {
      this.state = '7'
      this.$emit('hideOrder', false)
    },


    // 拒绝申请的叉叉  隐藏  统一用closeOrders
    // rejectOrders () {
    //   this.$emit('hideOrder', false)
    // },

    //点击查看协商历史，跳转页面
    talkHistoryHandel () {
      console.log('路由跳转');
      this.$router.push('/talkHistoryView')
    },
    // 地图函数
    initMap () {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 17
      })

      new AMap.Marker({
        map: this.map,
        position: [116.478935, 39.997761],
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
        offset: new AMap.Pixel(-13, -30), // 上面icon图片偏移量
        autoRotation: true,
      })
      new AMap.Marker({
        map: this.map,
        position: [116.484648, 39.999861],
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
        offset: new AMap.Pixel(-13, -30),
        autoRotation: true,
      })
      // 绘制轨迹
      new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: "#28F",  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
      })
      this.map.setFitView()
      // this.map = new AMap.Map("container", {
      //   center: [117.463316, 40.550095],
      //   pitch: 50, //俯仰角度 
      //   viewMode: "3D", //使用3D视图
      //   zoom: 12, //级别
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.closeBox,
.rejectBox,
.receiptBox,
.myRefundBox,
.followBox {
  font-size: 16px;
}
.title {
  display: inline-block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}
.close_des {
  width: calc(100% - 20px);
}
.close_des,
.reject_des {
  padding: 10px;
  display: inline-block;
  font-size: 12px;
  background-color: #efecec;
}
.reason {
  width: 100%;
  display: inline-block;
  font-size: 14px;
  margin: 10px auto;
}

.closeBtn,
.rejectBtn {
  width: 80%;
  margin: 5px auto;
}
.sureClose,
.sureReject {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-color: #ff6e53;
  border-radius: 20px;
  border: none;
  font-size: 16px;
}
.add_desc {
  border: none;
  width: 90%;
  height: 60px;
}
// 发票弹框样式
.myReceiptBox div {
  padding: 15px;
  margin-top: 10px;
  height: 20px;
  line-height: 20px;
}
// 退款流程样式
::v-deep .van-icon-checked:before {
  font-size: 20px;
}
::v-deep .van-step__circle {
  // font-size: 14px;
  width: 10px;
  height: 10px;
}
.consultDetail {
  font-size: 14px;
  padding: 15px;
}
.consult {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
}
.orderNum,
.orderMoney,
.orderReason,
.addReason,
.buyerName,
.buyerOrder,
.buyerGoods,
.buyerPay {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.orderNum span,
.orderMoney span,
.orderReason span,
.addReason span,
.buyerName span,
.buyerOrder span,
.buyerGoods span,
.buyerPay span {
  display: inline-block;
}
.greyColor {
  color: #999;
}
.van-steps--vertical {
  margin: 10px;
  margin-top: 20px;
}
.displayF {
  display: flex;
  justify-content: space-between;
}
.displayF_left,
.displayF_right {
  height: 30px;
  line-height: 30px;
  color: #000;
}
// 地图样式
#container {
  width: 90%;
  height: 200px;
  margin: 10px auto;
  border-radius: 10px;
}
</style>